<template>
  <div class="bg-color-white">
    <br/>
    <a-row>
      <a-col :span="4">
        <a-row>
          <a-col :span="4" class="hj-align-center">
            <a-icon type="appstore" theme="outlined" class="logo" :spin="true"/>
          </a-col>
          <a-col :span="20">
            <div class="logo-text">Form Design Studio</div>
          </a-col>
        </a-row>
        <br/>
        <a-row>
          <a-col>
            <a-popover placement="bottomLeft">
              <template slot="content">
                <a-menu :default-selected-keys="['1']" style="width: 210px">
                  <a-menu-item key="1">
                    <a-icon type="appstore"/>
                    单表视图
                    <router-link
                      target="_top"
                      ref="test"
                      :class="{'hide-ui':hideui==8?false:true}"
                      :to="{path:'Code1List', query:{ viewType: 2}}"
                    />
                  </a-menu-item>
                  <a-menu-item key="2">
                    <a-icon type="appstore"/>
                    明细表视图
                    <router-link
                      target="_top" ref="test"
                      :class="{'hide-ui':hideui==8?false:true}"
                      :to="{path:'DetailedList', query:{ viewType: 1}}"
                    />
                  </a-menu-item>
                </a-menu>
              </template>
              <template slot="title">
                <span>视图模板</span>
              </template>
              <a-button type="primary" class="btn-new">
                <a-icon type="plus"/>
                新建
              </a-button>
            </a-popover>
          </a-col>
        </a-row>
        <br/>
        <br/>
        <br/>
        <a-row>
          <a-col>
            <div>
              <a-menu :default-selected-keys="['1']" :mode="mode" :theme="theme">
                <a-menu-item key="1">
                  <a @click="allData">
                    <a-icon type="appstore"/>
                    所有视图
                  </a>
                </a-menu-item>
                <a-divider/>
                <a-menu-item key="2">
                  <a @click="waitUpload">
                    <a-icon type="sort-ascending"/>
                    待下载
                  </a>
                </a-menu-item>
                <a-divider/>
                <!-- <a-menu-item key="3">
                   <a @click="recycleBin">
                     <a-icon type="delete" />回收站
                   </a>
                 </a-menu-item>-->
              </a-menu>
            </div>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="20">
        <a-row>
          <a-col :span="1"></a-col>
          <a-col :span="9" class="hj-align-center">
            <a-input-search placeholder="搜索视图、描述" @search="onSearch"/>
          </a-col>
          <a-col :span="13"></a-col>
          <a-col :span="1">
            <a-button shape="circle" icon="sort-ascending" class="hj-border0 hi-color-transparent"/>
          </a-col>
        </a-row>
        <br/>

        <a-row>
          <a-col :span="1"></a-col>
          <a-col :span="23">
            <a-list
              item-layout="vertical"
              size="large"
              :pagination="ipagination"
              :data-source="dataSource"
            >
              <div slot="footer">
                <b></b>
              </div>
              <a-list-item slot="renderItem" key="item.title" slot-scope="item, index">
                <template slot="actions">
                  <span key="edit">
                    <a-icon type="edit" style="margin-right: 8px" @click="handleEdd(item)"/>
                    <CodeNewModule ref="newModule" @ok="newFormOk"></CodeNewModule>
                  </span>
                  <span key="delete">
                    <a-icon type="delete" style="margin-right: 8px" @click="handleDelete(item.id)"/>
                  </span>
                </template>

                <a-list-item-meta :description="item.viewComments">
                  <a v-if="item.detailedTable?true:false" slot="title"
                     :href="'DetailedList?viewMaintable='+item.viewMaintable+'&parentId='+item.id+'&detailedTable='+item.detailedTable">{{ item.viewName }}</a>
                  <a v-else slot="title" :href="'Code1List?viewMaintable='+item.viewMaintable+'&parentId='+item.id">{{ item.viewName }}</a>
                  <a-avatar
                    slot="avatar"
                    style="backgroundColor:transparent;"
                    icon="star"
                  />
                </a-list-item-meta>
                {{ item.content }}
              </a-list-item>
            </a-list>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script>
  import { getAction, deleteAction } from '@/api/manage'
  import { filterObj } from '@/utils/util'
  import Vue from 'vue'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import CodeNewModule from  '../generator/Code1/CodeNewModule'

  const listData = []
  export default {
    components:{
      CodeNewModule
    },
    data() {
      return {
        hideui: 8,
        mode: 'inline',
        theme: 'light',
        listData,
        url: {
          list: '/generatecode/viewModule/list',
          delete: '/generatecode/viewModule/thoroughDelete'
        },
        actions: [
          { type: 'edit', text: '' },
          { type: 'delete', text: '' }
        ],

        //搜索框条件
        searchParam: '',

        //token header
        tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
        /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
        queryParam: {},
        /* 数据源 */
        dataSource: [],
        /* 分页参数 */
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '30'],
          showTotal: (total, range) => {
            return range[0] + '-' + range[1] + ' 共' + total + '条'
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        /* 排序参数 */
        isorter: {
          column: 'viewCreatetime',
          order: 'desc'
        },
        /* 筛选参数 */
        filters: {},
        /* table加载状态 */
        loading: false
      }
    },
    created() {
      this.allData()
    },

    methods: {
      onSearch(value) {
        console.log(value)
        this.searchParam = value
        this.loadData()
      },


      loadData(arg) {
        if (!this.url.list) {
          this.$message.error('请设置url.list属性!')
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1
        }
        var params = this.getQueryParams() //查询条件
        this.loading = true
        getAction(this.url.list, params).then(res => {
          if (res.success) {
            this.dataSource = res.result.records
            this.ipagination.total = res.result.total
          }
          if (res.code === 510) {
            this.$message.warning(res.message)
          }
          this.loading = false
        })
      },
      initDictConfig() {
        console.log('--这是一个假的方法!')
      },

      getQueryParams() {
        //获取查询条件
        let sqp = {}

        var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
        //param.field = this.getQueryField();
        param.pageNo = this.ipagination.current
        param.pageSize = this.ipagination.pageSize
        param = filterObj(param)
        param.searchParam = this.searchParam
        return param
      },
      getQueryField() {
        //TODO 字段权限控制
        var str = 'id,'
        this.columns.forEach(function(value) {
          str += ',' + value.dataIndex
        })
        return str
      },

      //所有视图
      allData() {
        this.dataSource = []
        this.queryParam.viewDelFlag = '0'
        this.queryParam.viewUploadFlag = ''

        this.loadData()
      },

      //待下载
      waitUpload() {
        this.dataSource = []
        this.queryParam.viewDelFlag = '0'
        this.queryParam.viewUploadFlag = '0'
        this.loadData()
      },
      //回收站
      /* recycleBin() {
         this.dataSource = []
         this.queryParam.viewDelFlag = '1'
         this.queryParam.viewUploadFlag = ''
         this.loadData()
       },*/
      handleEdd(record){
        this.$refs.newModule.viewType=2
        this.$refs.newModule.edit(record)
      },
      newFormOk(e) {
        this.visible = false
        this.loadData()
      },
      handleDelete: function(id) {
        console.log(id)
        if (!this.url.delete) {
          this.$message.error('请设置url.delete属性!')
          return
        }
        var that = this
        deleteAction(that.url.delete, { id: id }).then(res => {
          if (res.success) {
            that.$message.success(res.message)
            that.allData()
          } else {
            that.$message.warning(res.message)
          }
        })
      }
    }
  }
</script>

<style>
  .logo {
    font-size: 30px !important;
    color: #9e9e9e !important;
  }

  .logo-text {
    color: lightgray;
    font-size: 20px;
    background-color: transparent;
  }

  .btn-new {
    margin-left: 10px;
    width: 210px !important;
    height: 40px !important;
  }

  .filter-div {
    margin-left: 10px;
    font-size: 14px;
    width: 210px !important;
    height: 40px !important;
  }

  .bg-color-white {
    background-color: white;
  }

  .ant-list-vertical .ant-list-item-action {
    margin-top: 16px;
    margin-left: auto;
    text-align: right !important;
  }
</style>
